<template>
  <div id="app">
    <div class="container">
      <transition name="el-fade-in-linear">
        <el-card class="box-card" shadow="hover" style="text-align: center">
          <div slot="header" class="clearfix" style="text-align: center">
            <h2 style="font-size: 1rem">校园疫情管理系统</h2>
          </div>
          <el-input prefix-icon="el-icon-user-solid" v-model="input_user" placeholder="请输入用户名" class="inp"></el-input>
          <div style="height: 1.3rem"></div>
          <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="input_pwd" show-password class="inp">
          </el-input>
          <el-radio-group v-model="radio3" size="small"
            style="display: flex;justify-content: space-around;margin-top: 1.3rem;">
            <el-radio label="1">管理员</el-radio>
            <el-radio label="2">学生</el-radio>
            <el-radio label="3">教师</el-radio>
          </el-radio-group>
          <el-button type="primary" class="button" size="small" @click="login">登录</el-button>
        </el-card>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      input_user: '',
      input_pwd: '',
      radio3: '1',
    }
  },
  methods: {
    login() {
      if (!this.input_user || !this.input_pwd) {
        this.$message({
          message: '用户名和密码不能为空',
          type: 'warning'
        });
        this.input_pwd = '';
      } else {
        const data = {
          username: this.input_user,
          password: this.input_pwd,
          type: this.radio3
        };
        this.Request.post(this.$url.API.userlogin, data, {})
          .then((res) => {
            if (res.state === 0) {
              this.$message.error('用户信息错误，请重试！');
              this.input_pwd = '';
            }
            if (res.state === 1) {
              localStorage.setItem('token', res.token);
              switch (this.radio3) {
                case '1':
                  this.$router.push('/admin');
                  break;
                case '2':
                  this.$router.push('/student');
                  break;
                case '3':
                  this.$router.push('/teacher');
                  break;
                default: break;
              }
            } else {
              localStorage.removeItem('token');
            }
          })
      }
    }
  },

}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

#app {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  background-color: #2d3a4b;
}

.container {
  width: 25%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login {
  h3 {
    text-align: center;
    height: 60px;
    line-height: 20px;
    border-bottom: 1px solid rgb(170, 170, 170);
    color: rgb(92, 92, 92);
  }

  .inp {
    margin-top: 10px;
  }

  .button {
    margin-top: 20px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>